<template>
  <div>
    <a-table
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
      :columns="columns"
      :rowKey="(record) => record.id"
      :data-source="tableData"
      bordered
    >
      <template #content="{ record }">
        <!-- <div> -->
        <div class="title">
          <!-- <div v-html="record.content"></div> -->
          {{ record.content }}
        </div>
      </template>
      <template #operation="{ record }">
        <a @click="edit(record.id)" style="margin-right: 10px">Edit</a>
        <a-popconfirm
          v-if="dataSource.length"
          title="确定删除?"
          @confirm="onDelete(record.id)"
        >
          <a>Delete</a>
        </a-popconfirm>
      </template>
      <template #title>
        <a-button type="primary" class="distance" @click="showModal">
          添加
        </a-button>
        <!-- <adduser /> -->
        <a-button
          type="danger"
          class="distance"
          :disabled="!hasSelected"
          :loading="loading"
          @click="mdelete()"
        >
          <DeleteOutlined />
          批量删除
        </a-button>
        搜索：
        <a-input-search
          v-model:value="search"
          placeholder="input search text"
          enter-button
        />
      </template>
    </a-table>
    <a-modal
      v-model:visible="visible"
      title="编辑游记新闻"
      @ok="handleOk"
      width="100%"
      wrapClassName="full-modal"
    >
      <addarticle :info="info" :hello="hello" ref="myArticleInfo" />
    </a-modal>
  </div>
</template>
<script>
  import { cloneDeep } from 'lodash-es'
  import { reactive, ref, computed, toRefs, onMounted } from 'vue'
  import { getTravelList } from '@/api/datatable.js'
  import { addTravel } from '@/api/httpapi.js'
  import { DeleteOutlined } from '@ant-design/icons-vue'
  // import adduser from '@/components/form/adduser'
  import addarticle from '@/components/form/addarticle'
  export default {
    components: {
      DeleteOutlined,
      // adduser,
      addarticle,
    },
    setup() {
      const columns = [
        {
          title: '游记标题',
          dataIndex: 'travelTitle',
          width: '12%',
          slots: {
            customRender: 'travelTitle',
          },
        },
        {
          title: '编辑作者',
          dataIndex: 'travelAuthor',
          width: '12%',
          slots: {
            customRender: 'travelAuthor',
          },
        },
        {
          title: '内容',
          dataIndex: 'content',
          width: '40%',
          slots: {
            customRender: 'content',
          },
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          width: '15%',
          slots: {
            customRender: 'createTime',
          },
        },
        {
          title: '修改时间',
          dataIndex: 'updateTime',
          width: '15%',
          slots: {
            customRender: 'updateTime',
          },
        },
        {
          title: 'operation',
          dataIndex: 'operation',
          slots: {
            customRender: 'operation',
          },
        },
      ]
      const data = []
      //表格数据
      const dataSource = ref(data)
      //编辑时存放的数据
      let editableData = reactive({})
      //数据接口绑定表格
      const initializationData = () => {
        getTravelList().then(function (res) {
          dataSource.value = res.data
        })
      }
      onMounted(() => {
        initializationData()
        console.log('initialization...')
      })
      let info = ref({
        id: undefined,
        title: '',
        editor: '',
        content: '',
      })
      const hello = ref('sds')
      //点击编辑，表格内编辑，放置editableData
      const edit = (id) => {
        editableData = cloneDeep(
          dataSource.value.filter((item) => id === item.id)[0]
        )
        // console.log(editableData)
        info.value = {
          id: editableData.id,
          title: editableData.travelTitle,
          editor: editableData.travelAuthor,
          content: editableData.content,
        }

        hello.value = 'sdsd'
        visible.value = true
      }

      let search = ref('')
      //搜索绑定表格
      const tableData = computed(() => {
        if (search.value) {
          return dataSource.value.filter((data) => {
            return Object.keys(data).some((key) => {
              return String(data[key]).toLowerCase().indexOf(search.value) > -1
            })
          })
        }
        return dataSource.value
      })
      const state = reactive({
        selectedRowKeys: [],
        // Check here to configure the default column
        loading: false,
      })
      const hasSelected = computed(() => state.selectedRowKeys.length > 0)
      const onSelectChange = (selectedRowKeys) => {
        console.log('selectedRowKeys changed: ', selectedRowKeys)
        state.selectedRowKeys = selectedRowKeys
      }
      const visible = ref(false)

      const showModal = () => {
        info.value = {
          id: undefined,
          title: '',
          editor: '',
          content: '',
        }
        hello.value = 'sdsssd'
        // console.log(info)
        visible.value = true
      }
      const myArticleInfo = ref()
      const handleOk = (e) => {
        console.log(e)
        visible.value = false
        // myArticleInfo.value.addarticleInfo()
        // console.log(myArticleInfo.value.formState)
        const a = myArticleInfo.value.formState
        console.log(a)
        // addSite(a).then()
        addTravel(a).then(function (res) {
          console.log(res.data)
          initializationData()
        })
      }
      const onDelete = (key) => {
        dataSource.value = dataSource.value.filter((item) => item.id !== key)
      }
      // const getFormData = (val) => {
      //   console.log(val)
      // }
      const mdelete = () => {
        console.log(state.selectedRowKeys)
        for (let i = 0; i < state.selectedRowKeys.length; i++) {
          // console.log(state.selectedRowKeys[i])
          onDelete(state.selectedRowKeys[i])
        }
      }
      return {
        dataSource,
        columns,
        editingKey: '',
        editableData,
        tableData,
        search,
        hasSelected,
        visible,
        info,
        ...toRefs(state),
        edit,
        onSelectChange,
        showModal,
        handleOk,
        initializationData,
        onDelete,
        mdelete,
        // getFormData,
        hello,
        myArticleInfo,
      }
    },
  }
</script>
<style lang="less">
  .editable-row-operations a {
    margin-right: 8px;
  }
  .distance {
    margin-right: 20px;
  }

  .title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -moz-box;
    -moz-line-clamp: 2;
    -moz-box-orient: vertical;
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
  }
  .full-modal {
    .ant-modal {
      max-width: 100%;
      top: 0;
      padding-bottom: 0;
      margin: 0;
    }
    .ant-modal-content {
      display: flex;
      flex-direction: column;
      height: calc(100vh);
    }
    .ant-modal-body {
      flex: 1;
    }
  }
</style>
